
<style lang="less" scoped>
@cf : #fff;
@c1 : #111;
@c9 : #999;
@ch : #f682a7;

.wehome {
  .con {
    padding: 50px 0;
    .main {
      width: 50%;
      float: left;
      padding: 0 50px;
      .tab {
        ul {
          li {
            display: inline-block;
            padding: 10px 40px 10px 0;
            cursor: pointer;
            &.active {
              color: @ch;
            }
          }
        }
      }
      .article {
        ul {
          padding: 30px 0;
          li {
            padding: 30px 0;
            .box {
              .pic {
                width: 22%;
                float: left;
                font-size: 0;
                overflow: hidden;
                img {
                  display: block;
                  width: 100%;
                }
              }
              .text {
                width: 78%;
                float: left;
                padding: 0 0 0 20px;
                .title {
                  font-size: 18px;
                  font-weight: normal;
                  &:hover {
                    color: @ch;
                  }
                }
                .time {
                  padding-top: 15px;
                  display: block;
                  line-height: 1;
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
    .white {
      .tab ul {
        border-bottom: 1px solid @cf;
        li {
          color: @cf;
          &:hover {
            color: @ch;
          }
        }
      }
      .article {
        ul {
          li {
            .box {
              color: @cf;
              .text {
                .time {
                  color: @c9;
                }
              }
            }
          }
        }
      }
    }
    .black {
      .tab ul {
        border-bottom: 1px solid @c1;
        li {
          color: @c1;
          &:hover {
            color: @ch;
          }
        }
      }
      .article {
        ul {
          li {
            .box {
              color: @c1;
            }
          }
        }
      }
    }
  }
}
</style>
<template>
  <div class="wehome">
    <Header />
    <Banner />
    <div></div>
    <div class="con" :style="{background:'url(' + bg + ') center'}">
      <div class="cistern">
        <div class="main white">
          <div class="tab">
            <ul>
              <li
                v-for="(tabList, index) in articleList"
                v-bind:key="index"
                :class="{active:codeTabListActiveIndex ===index}"
                @click="codeTabListActiveIndex = index"
              >{{tabList.type}}</li>
            </ul>
          </div>
          <div class="article">
            <ul>
              <li class="clearfix" v-for="item in articleList" :key="item.id">
                <nuxt-link class="box" :to="'/details/' + item._id">
                  <div class="pic">
                    <img src="/_nuxt/assets/img/meishi.jpg" alt />
                  </div>
                  <div class="text">
                    <h2 class="title">{{item.title}}</h2>
                    <span class="time">{{item.time}}</span>
                  </div>
                </nuxt-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="main black">
          <div class="tab">
            <ul>
              <li
                v-for="(tabList, index) in foosieTabList"
                v-bind:key="index"
                :class="{active:foosieTabListActiveIndex ===index}"
                @click="foosieTabListActiveIndex = index"
              >{{tabList}}</li>
            </ul>
          </div>
          <div class="article">
            <ul>
              <li class="clearfix" v-for="item in foodieList" :key="item.id">
                <nuxt-link class="box" :to="'/details/' + item.id">
                  <div class="pic">
                    <img :src="item.pic" alt />
                  </div>
                  <div class="text">
                    <h2 class="title">{{item.title}}</h2>
                    <span class="time">{{item.time}}</span>
                  </div>
                </nuxt-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "../../components/header.vue";
import Banner from "../../components/banner.vue";

export default {
  name: "wehome",
  components: {
    Banner,
    Header
  },
  data() {
    return {
      bg: require("../../assets/img/bg.jpg"),
      codeTabList: ["Html", "Javascript", "Node"],
      codeList: [],
      foosieTabList: ["日记", "美食", "美图"],
      foodieList: [
        {
          id: "1234",
          pic: require("../../assets/img/meishi.jpg"),
          title: "node开发过程中需频繁手动重启才能看效果",
          time: "2019.08.26"
        }
      ],
      codeTabListActiveIndex: 0,
      foosieTabListActiveIndex: 0,
      articleList: "",
      cookieList: ""
    };
  },
  async asyncData({ $axios }) {
    return await $axios
      .get("/article/list")
      .then(({ data }) => {
        return {
          cookieList: data,
          articleList: data
        };
      })
      .catch(err => {
        console.log(err);
      });
  },
  mounted: function() {
    this.$nextTick(function() {
    });
  }
};
</script>
